<template>
    <maskLayer v-model="visible" center append-to-body>
        <div class="video_view">
            <div class="video_close">
                <img @click="closeVideo" src="../assets/course/3.png" alt="">
            </div>
            <div class="video">
                <video v-if="visible" :autoplay="true" controls :src="url" @timeupdate="updateProgress" @ended="videoEnd"></video>
            </div>
        </div>
    </maskLayer>
</template>

<script setup name="viewVideo">
import maskLayer from "@/components/maskLayer.vue";
import { ref, toRefs } from "vue";

const props = defineProps({
    url: {
        type: String,
        default: ""
    }
})
const {url} = toRefs(props);
const emits = defineEmits(["closeVideo"]);
let visible = ref(false);
function openVideo() {
    visible.value = true;
}
function closeVideo() {
    visible.value = false;
    emits('closeVideo', currentTime.value);
}
function videoEnd() {
    emits('closeVideo', currentTime.value);
}
let currentTime = ref(0);
function updateProgress(e) {
    currentTime.value = parseInt(e.target.currentTime);
}
defineExpose({
    openVideo
})
</script>

<style lang="scss" scoped>
    .video_view {
        width: 569px;
        height: 351px;
        .video_close {
            text-align: right;
            margin-bottom: 14px;
            img {
                width: 17px;
                height: 17px;
                cursor: pointer;
            }
        }
        .video {
            width: 569px;
            height: 320px;
            video {
                width: 569px;
                height: 320px;
            }
        }
    }
</style>